<template>
  <div class="navbar">
    <el-col :span="24">
      <el-menu
        :router="true"
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        text-color="#cdcdcd"
        active-text-color="white"
        collapse-transition="false"
      >
        <el-menu-item index="/admin">
          <template #title>
            <el-icon><User /></el-icon>
            <span>个人中心</span>
          </template>
        </el-menu-item>

        <el-menu-item index="/admin/product/">
          <template #title>
            <el-icon><Goods /></el-icon>
            <span>商品管理</span>
          </template>
        </el-menu-item>

        <el-menu-item index="/admin/order/">
          <template #title>
            <el-icon><Notebook /></el-icon>
            <span>订单管理</span>
          </template>
        </el-menu-item>

        <el-menu-item index="/admin/user/">
          <template #title>
            <el-icon><Avatar /></el-icon>
            <span>用户管理</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-col>
  </div>
</template>

<script setup>
import { User, Goods, Notebook, Avatar } from '@element-plus/icons-vue';
</script>

<style lang="scss" scoped>
.navbar {
  background: #495060;
  height: 100vh;
  display: flex;
  align-items: flex-start; /* 调整为顶部对齐 */
  justify-content: center;
  padding-top: 20px;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.el-col {
  width: 100%;
}

.el-menu-vertical-demo {
  border-right: none;
  background-color: #495060;
}

.el-menu-item {
  display: flex;
  align-items: center;
  padding: 15px 20px; /* 调整内边距以减少距离 */
  transition: background-color 0.3s ease;

  .el-icon {
    margin-right: 10px;
    font-size: 20px;
  }

  span {
    font-size: 16px;
  }

  &:hover {
    background-color: #2d8cf0;
  }

  &:not(:last-child) {
    border-bottom: 1px solid #444;
  }
}
</style>
